Day28-RxJS: 處理非同步操作

2023 iThome 鐵人賽

DAY 28

Modern Web

Angular，啟動。系列第 28 篇

15th鐵人賽

Raven

2023-10-13 22:22:20

359 瀏覽

分享至

簡介

RxJS 是 Javascript 的函式庫，主要用來處理非同步操作、事件，例如：與後端進行 HTTP 通訊、UI 事件監聽。
首先先熟悉下等等會出現的名詞（後面會盡量使用英文名稱）：

英文名稱	中文名稱	說明
`Observable`	被觀察者	隨時間出現的資料串流，並可被觀察。
`Observer`	觀察者	接收 `Observable` 回傳的對象
`Subscription`	訂閱	`Observable` 與 `Observer` 間的訂閱關係
`Operator`	操作符	處理事件資料的函式(function)
`Subject`	主體物件	與 EventEmitter 功能相似，將廣播收到的事件資料給多位 `Observer`

我自己覺得可以先看例子會比較好去理解。

而 Observer 有三個 Callbacks 回呼方法的 Interface，用來監聽 Observable 送出的資料。

Interface	說明
`next`	`Observable` 將串流中的下一個資料給 `Observer`。
`error`	`Observable` 將錯誤訊息給 `Observer`。
`complete`	`Observable` 通知 `Observer` 串流資料全部完成。

<!-- XXXComponent.html -->
<button (click)="getRainbowsData()">click</button>

export class XXXComponent {
  // 1. 建立 彩虹資料串流 Observable ><
  //    透過 of() 將內容轉成串流
  //    我習慣會在後面 + $ 來表示這是被觀察的對象
  rainbows$: Observable<string> = of('red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet');

  /** 取得資料 **/
  getRainbowsData(){
    // 2. Observer 接收資料
    //    並分別設定獲取到 下份資料、錯誤訊息、完成訊息 的處理方式
    let myObserver: Observer<string> = {
      next: (res) => console.log(res),
      error: (err) => console.log(err),
      complete: () => console.log('Finish!!')
    };
    
    // 3. 訂閱，啟動。
    const subscription: Subscription = this.rainbows$.subscribe(myObserver);
  }
}

按下 button 印出的資料
　

建立 `Observable` 的幾種方式

編號	方法
1	of()
2	from()
3	interval()
4	new Observable()

// 1: of()
source1$: Observable<number> = of(0, 1, 2, 3, 4);

// 2: from()
//    裡面是放陣列
source2$: Observable<number> = from([0, 1, 2, 3, 4]);

// 3: interval()
//    每隔一段時間會寄 numbers 來
//    pipe() 是一種 Operator 
source3$: Observable<number> = interval(500).pipe(take(5));

// 4: new Observable()
source4$ = new Observable((subr) => {
  subr.next(0);
  subr.next(1);
  subr.next(2);
  subr.next(3);
  subr.next(4);
  subr.complete();
});


// Observer, Subscription 觀察和訂閱的方式跟上面例子一樣，
// 只是替換了 Observable 的對象。

按下 button 印出的資料